<template>
  <!-- 双向绑定 -->
  <!-- <div>用户名:<input v-model="username" type="text" /></div> -->
  <!-- 计算属性完整写法 -->
  <div>全名:<input v-model="fullname" type="text" /></div>
</template>

<script>
export default {
  name: "VueBaseApp",

  data() {
    return {
      firstname: "卖国贼",
      username: "爱新觉罗臭粑粑",
    };
  },
  computed: {
    // fullname() {
    //   return this.firstname + "." + this.lastname;
    // },
    // v-model绑定后,用户修改文本框内容,fullname就会被重新赋值
    // 计算属性被重新赋值时,会执行set函数,并且传入最新的数据
    fullname: {
      set(val) {
        let arr = val.split(".");
        this.firstname = arr[0];
        this.username = arr[1];
      },
      get() {
        return this.firstname + "." + this.username;
      },
    },
  },
  mounted() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
</style>